<template>
	<view class="l_pages" :style="skin">
		<jnavbar title="分销订单"></jnavbar>
		<view class="page_container">
			<view class="uni-block-bar uni-view uni-flex-row uni-underline">
				<view :class="[tabIndex == -1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="-1" @click="tapTab"><text>全部</text></view>
				<view :class="[tabIndex == 0 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="0" @click="tapTab"><text>未结算</text></view>
				<view :class="[tabIndex == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="1" @click="tapTab"><text>已结算</text></view>
				<view :class="[tabIndex == 3 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="3" @click="tapTab"><text>退款</text></view>
			</view>
			<scroll-view scroll-y class="scroll_div" @scrolltolower='getlist'>
				<view class="uni-block-list">
					<view class="empty_div" v-if="hasShow == 'none'"><u-empty  text="暂无数据" mode="list"></u-empty></view>

					<view class="list">
						<view class="item" v-for="(item, i) in list" :key="i">
							<view class="goods uni-flex-row">
								<view class="goods_img"><vimage class="img_box" :src="item.master" mode=""></vimage></view>
								<view class="uni-flex-column goods_content">
									<text>{{ item.name }}</text>
									<text>订单号：{{ item.order_no }}</text>
								</view>
								<text>{{ item.status_text }}{{ item.steps == 0 ? '/内购' : '' }}</text>
							</view>
							<u-line :margin="'30rpx 0'"></u-line>
							<block v-if="item.agent1">
								<view class="agent uni-flex-row">
									<view class="act_img"><vimage class="img_box" :src="item.agent1.picurl"></vimage></view>
									<view class="uni-flex-column content">
										<text class="u-line-2">{{ item.agent1.nickname }}</text>
										<text>一级分销</text>
									</view>
									<text>{{ item.amount1 }}</text>
								</view>
							</block>
							<block v-if="item.agent2">
								<u-line :margin="'10rpx 0'"></u-line>

								<view class="agent uni-flex-row">
									<view class="act_img"><vimage class="img_box" :src="item.agent2.picurl"></vimage></view>
									<view class="uni-flex-column content">
										<text>{{ item.agent2.nickname }}</text>
										<text>二级分销</text>
									</view>
									<text>{{ item.amount2 }}</text>
								</view>
							</block>
							<block v-if="item.agent3">
								<u-line :margin="'10rpx 0'"></u-line>

								<view class="agent uni-flex-row">
									<view class="act_img"><vimage class="img_box" :src="item.agent3.picurl"></vimage></view>
									<view class="uni-flex-column content">
										<text>{{ item.agent3.nickname }}</text>
										<text>三级分销</text>
									</view>
									<text>{{ item.amount3 }}</text>
								</view>
							</block>
						</view>
					</view>
					<uni-login ref="Login" @callback="logincallback"></uni-login>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			size: 10,
			list: [],
			tabIndex: -1,
			hasShow: 'none'
		};
	},
	async onLoad() {
		await this.$getWx
		this.orderlist();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = list;
	},
	computed:{
		skin(){
			return this.$store.state.skin;
		}
	},
	methods: {
		getlist(){
			this.orderlist(this.tabIndex);
		},
		tapTab(e) {
			this.tabIndex = e.currentTarget.dataset.id;
			this.page = 1;
			this.list = [];
			this.orderlist(this.tabIndex);
		},
		logincallback(e) {
			if (e.islogin) {
				this.orderlist();
			}
		},
		orderlist() {
			let data = {
				page: this.page,
				size: this.size,
				status: this.tabIndex
			};
			uni.showLoading();
			this.$http('/agent/order', data, 'POST').then(res => {
				let list = res.data.msg.data;
				uni.stopPullDownRefresh();
				uni.hideLoading();

				if (list.length > 0) {
					this.hasShow = 'list';
					this.list = this.list.concat(list);
					this.page++;
				} else {
					if (this.page == 1) {
						this.hasShow = 'none';
					} else {
						uni.showToast({
							title: '没有更多数据了',
							icon: 'none'
						});
					}
				}
				// let last_page=res.data.msg.last_page
				// if (list.length > 0) {
				// 	this.page++;
				// 	this.list = this.list.concat(list);
				// }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page_container {
	position: relative;
	.scroll_div {
		height: calc(100% - 80rpx);
	}
}
.uni-block-bar {
	justify-content: space-between;
	height: 80rpx;
	z-index: 100;
	width: 750rpx;
	.item {
		line-height: 78rpx;
		flex: 1;
		color: #696969;

		text {
			display: inline-block;
		}
	}

	.active {
		color: var(--main-color);
		border-bottom: 2rpx solid var(--main-color);
	}
}
.uni-block-list {
	.empty_div {
		height: 500rpx;
	}
}
.list {
	.item {
		background: #ffffff;
		margin-bottom: 20rpx;
		width: 702rpx;
		margin-left: 24rpx;
		padding: 24rpx;
		border-radius: 12rpx;
		.goods_content {
			flex: 1;
		}
		.agent {
			.act_img {
				border-radius: 50%;
				overflow: hidden;
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				// flex: 1;
				.img_box {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.content {
				flex: 1;
			}
		}
	}
}
.goods_img {
	border-radius: 50%;
	overflow: hidden;
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
	.img_box {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>
